var vm = new Vue({
    el:'#rrapp',
    data:{
      collageData:null,
      yearData:null,
      termData:null,
      weekData:null,
      dayData:null,
      indexData:null,
      collageValue:[],
      yearValue:[],
      termValue:[],
      weekValue:[],
      dayValue:[],
      indexValue:[],
      collageOptions:[],
      yearOptions:[],
      termOptions:[],
      weekOptions:[],
      dayOptions:[],
      indexOptions:[]
    },
    mounted(){
         $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                    var tempJson={
                        'value':r.list[i].collegeName,
                        'label':r.list[i].collegeName
                    }
                    vm.collageOptions.push(tempJson)
                }
            }
        });
        $.ajax({
            url: baseURL + "/term/getSchoolTerm",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                     var tempJson={
                        'value':r.list[i].schoolAcademicYear,
                        'label':r.list[i].schoolAcademicYear
                    }
                    vm.yearOptions.push(tempJson)
                }
            }
         });
         var listTerm=["1","2"];
         for (i = 0; i < listTerm.length; i++) {
            var tempJson={
                'value':listTerm[i],
                'label':"第"+listTerm[i]+"学期"
            }
            this.termOptions.push(tempJson)
         }
         for (i = 1; i < 21; i++) {
            var tempJson={
                'value':i,
                'label':"第"+i+"周"
            }
            this.weekOptions.push(tempJson)
         }
         for (i = 1; i < 8; i++) {
           var tempJson={
                'value':i,
                'label':"星期"+i
            }
            this.dayOptions.push(tempJson)
         }
         for (i = 1; i < 11; i+=2) {
            var tempJson={
                'value':i,
                'label':"第"+i+"节"
            }
            this.indexOptions.push(tempJson)
         }
    },
    methods:{

    }
});
//*******************************v**u**e*********************************

// 基于准备好的dom，初始化echarts实例
var hasCourse = echarts.init(document.getElementById('hasCourse'),'walden');//定义折线图显示的位置对象
var teacherAttendancePie = echarts.init(document.getElementById('teacherAttendancePie'),'walden');
var coincidenceRate = echarts.init(document.getElementById('coincidenceRate'),'walden');
var teacherEvaltionTimeLine = echarts.init(document.getElementById('teacherEvaltionTimeLine'),'walden');
var studentAttendenceChartFirstTen = echarts.init(document.getElementById('studentAttendenceChartFirstTen'),'walden');
var studentAttendenceChartEndTen = echarts.init(document.getElementById('studentAttendenceChartEndTen'),'walden');
studentAttendenceChartFirstTenOption = {
    title: {
        text: '平均授课时长',
        subtext: '前十名'
    },
    tooltip: {
    },
    legend: {
        data:['班级']
    },
    toolbox: {
    },
    xAxis:  {
        type: 'category',
        data: ['','','','','','','','','','',''],
        axisLabel: {
            interval:0,
            rotate:40
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} %'
        }
    },
    series: [
        {
            name:'到课率',
            type:'bar',
            data:[100,100,100,100,100,100,100,100,100,100],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};
studentAttendenceChartEndTenOption = {
    title: {
        text: '平均授课时长',
        subtext: '后十名'
    },
    tooltip: {
    },
    legend: {
        data:['班级']
    },
    toolbox: {
    },
    xAxis:  {
        type: 'category',
        data: ['','','','','','','','','','',''],
        axisLabel: {
            interval:0,
            rotate:40
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} %'
        }
    },
    series: [
        {
            name:'到课率',
            type:'bar',
            data:[100,100,100,100,100,100,100,100,100,100],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};



var teacherAttendancePieOption  = {
    title : {
        text: '出勤情况',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['正常','早退','迟到','调整']
    },
    series : [
        {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:[
                {value:335, name:'优'},
                {value:310, name:'良'},
                {value:234, name:'差'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
var hasCourseOption = {
    title: {
        text: '有课老师占比',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['有课', '没课']
    },
    series : [
        {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:[
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
var coincidenceRateOption  = {
    title : {
        text: '教学进度相符率',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['相符','不相符']
    },
    series : [
        {
            name: '占比',
            type: 'pie',
            // radius : '55%',
            // center: ['50%', '60%'],
            data:[
                {value:335, name:'优'},
                {value:310, name:'良'},
                {value:234, name:'差'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
var teacherEvaltionTimeLineOption = {
    title : {
        text: '授课时长纵向比',
        x:'center'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} 分钟'
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        markLine: {
    data: [
        {type: 'average', name: '平均值'}
    ]
}
    }
]
};


$(function () {
    hasCourse.setOption(hasCourseOption);
})
function goString(data){
    var temp=""
    for(let i in data){
        if(i==data.length-1){
            temp+=('\''+data[i]+'\'')
        }else{
            temp+=('\''+data[i]+'\'')+','
        }
    }
    return temp
}
function query()
{
    vm.collageData=goString(vm.collageValue);
    vm.yearData=goString(vm.yearValue);
    vm.termData=goString(vm.termValue);
    vm.weekData=goString(vm.weekValue);
    vm.dayData=goString(vm.dayValue);
    vm.indexData=goString(vm.indexValue);
    $.ajax({
        url: baseURL + "dataDisplay/getMycollegeDisplayEcharts",
        data: {
            "academicYear":vm.yearData,
            "academicTerm":vm.termData,
            "academicWeek":vm.weekData,
            "academicDay":vm.dayData,
            "academicIndex":vm.indexData,
            "collegeName":$("#option").val(),
            "startDate":$("#startDate").val(),
            "endDate":$("#endDate").val()
        },
        success: function (r) {
            hasCourseOption.series[0].data=r.hasCourse;
            teacherAttendancePieOption.series[0].data=r.teacherAttendancePie;
            coincidenceRateOption.series[0].data=r.coincidenceRate;
            teacherEvaltionTimeLineOption.xAxis.data=r.timeLine.xData;
            teacherEvaltionTimeLineOption.series[0].data=r.timeLine.seriesData;
            studentAttendenceChartFirstTenOption.xAxis.data=r.averageTeacheingTime.classNamesFirstTen;
            studentAttendenceChartFirstTenOption.series=getSeries(r.averageTeacheingTime.rateFirstTen);
            studentAttendenceChartFirstTenOption.yAxis.axisLabel.formatter=r.averageTeacheingTime.averageTime;
            studentAttendenceChartEndTenOption.xAxis.data=r.averageTeacheingTime.classNamesEndtTen;
            studentAttendenceChartEndTenOption.yAxis.axisLabel.formatter=r.averageTeacheingTime.averageTime;
            studentAttendenceChartEndTenOption.series=getSeries(r.averageTeacheingTime.rateEndTen);


            hasCourse.setOption(hasCourseOption);
            teacherAttendancePie.setOption(teacherAttendancePieOption);
            coincidenceRate.setOption(coincidenceRateOption);
            teacherEvaltionTimeLine.setOption(teacherEvaltionTimeLineOption);
            studentAttendenceChartFirstTen.setOption(studentAttendenceChartFirstTenOption,true);
            studentAttendenceChartEndTen.setOption(studentAttendenceChartEndTenOption,true);

        }
    });
}

function getSeries(data)
{
    var     series=
        {
            name:'到课率',
            type:'bar',
            data:data,
            barWidth : 30,//柱图宽度
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    return series;
}



function setDate(id) {
    var Nowdate=new Date();
    M=Number(Nowdate.getMonth())+1;
    var today=Nowdate.getFullYear()+"-"+fix(M)+"-"+fix(Nowdate.getDate());
    if(id=='1'){
        $("#startDate").val(today);
        $("#endDate").val(today);
    }else if(id=='2'){
        $("#startDate").val(showWeekFirstDay());
        $("#endDate").val(today);
    }if(id=='3'){
        $("#startDate").val(showMonthFirstDay());
        $("#endDate").val(today);
    }
    query()
}
function showWeekFirstDay()
{
    var Nowdate=new Date();
    var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
    M=Number(WeekFirstDay.getMonth())+1
    return WeekFirstDay.getFullYear()+"-"+fix(M)+"-"+fix(WeekFirstDay.getDate());
}
function showWeekLastDay()
{
    var Nowdate=new Date();
    var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
    var WeekLastDay=new Date((WeekFirstDay/1000+6*86400)*1000);
    M=Number(WeekLastDay.getMonth())+1
    return WeekLastDay.getFullYear()+"-"+M+"-"+WeekLastDay.getDate();
}
function showMonthFirstDay()
{
    var Nowdate=new Date();
    var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
    M=Number(MonthFirstDay.getMonth())+1
    return MonthFirstDay.getFullYear()+"-"+fix(M)+"-"+fix(MonthFirstDay.getDate());
}
function fix(num){
    if(num<10)
        return "0"+num;
    else return ""+num;
}
function showMonthLastDay()
{
    var Nowdate=new Date();
    var MonthNextFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth()+1,1);
    var MonthLastDay=new Date(MonthNextFirstDay-86400000);
    M=Number(MonthLastDay.getMonth())+1
    return MonthLastDay.getFullYear()+"-"+M+"-"+MonthLastDay.getDate();
}